<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .area {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            background: #ffa555;
        }

        ul {
            width: 300px;
            height: 300px;
            position: relative;
        }

        li {
            position: absolute;
            width: 50px;
            height: 50px;
            background: #000000;
            font-size: 12px;
            color: #ffffff;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            user-select: none;
        }

        .countDown {
            margin: 0 auto;
            text-align: center;
        }

        .grade {
            margin: 10px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="area">
        <ul></ul>
    </div>
    <div class="countDown">10s后结束</div>
    <div class="grade">砸中了0次</div>

    <script>

        // 实现思路
        // 地鼠随机出现1~3只，并且分布在场地上的随机位置 --- 随机数 + 定位
        // 打地鼠 --- 点击事件，点击后改变样式并计分
        // 地鼠出现一段时间后会逃走，再出现新的地鼠 --- 批量删除盒子

        var oUl = get("ul");

        // 计分器
        var count = 0;
        var oG = get(".grade");

        out();

        // 计时器
        var time = 10;
        var oT = get(".countDown");

        setInterval(round, 1000);

        // 封装函数 --- 10s一回合
        function round() {

            // 如果倒计时完毕,游戏结束,统计分数
            if (time !== 0) {
                time--;
                oT.innerHTML = time + "s后结束";
            }
            else {
                clearInterval(round);
                alert("您总共打中了" + count + "只地鼠");
                time = 11;
                oT.innerHTML = time + "s后结束";
                count = 0;
                oG.innerHTML = "砸中了" + count + "次";
            }
        }

        // 定时器 --- 地鼠逃跑
        var t = setInterval(function () {

            console.log(oUl.children.length);

            // 地鼠出来后过一段时间会逃走
            // oUl.children.length在删除盒子时会一直动态变化,会出bug
            // 解决方案:用i--替代i++
            for (var i = oUl.children.length - 1; i >= 0; i--) {
                oUl.removeChild(oUl.children[i]);
                console.log(i, oUl.children.length);
            }

            out();
        }, 1000)

        // 封装函数 --- 地鼠出现
        function out() {

            // 地鼠出现的数量
            var num = Math.ceil(Math.random() * 3);

            // 出现对应数量的地鼠
            for (var i = 0; i < num; i++) {
                oUl.innerHTML += `<li></li>`;
            }

            var oLi = get("li");
            var oLis = getAll("li");

            var scale = oUl.offsetWidth / oLi.offsetWidth - 1;
            // console.log(scale);

            // 地鼠出现在随机的地方
            for (var i = 0; i < oLis.length; i++) {
                x = Math.round(Math.random() * scale) * oLi.offsetWidth;
                y = Math.round(Math.random() * scale) * oLi.offsetHeight;
                // console.log(x, y);

                oLis[i].style.left = x + "px";
                oLis[i].style.top = y + "px";
                oLis[i].innerHTML = "地鼠";

                // 绑定点击事件 --- 打地鼠
                oLis[i].onclick = function () {
                    this.innerHTML = "挨打了";
                    this.style.background = "red";
                    count++;
                    oG.innerHTML = "砸中了" + count + "次";
                }
            }
        }

        // 封装函数 --- 获取值
        function get(a) {
            return document.querySelector(a);
        }
        function getAll(a) {
            return document.querySelectorAll(a);
        }

    </script>
</body>

</html>